<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>comet example</title>
<script type="text/javascript" src="../unJs/core.js"></script>
<script type="text/javascript" src="../unJs/window.js"></script>
<script type="text/javascript" src="../comet.js"></script>
<script type="text/javascript" src="../unJs/spinner.js"></script>
<script type="text/javascript" src="../unJs/editor.js"></script>
<script type="text/javascript" src="chat.js"></script>
<link href="../unJs/style/grey/css/reset.css" type="text/css"
	rel="stylesheet" />
<link href="../unJs/style/grey/css/window.css" type="text/css"
	rel="stylesheet" />
<link href="../unJs/style/grey/css/editor.css" type="text/css"
	rel="stylesheet" />
<link href="style/css/chat.css" type="text/css" rel="stylesheet" />

<script type="text/javascript">
	Un.ready(function() {
		COMMAND_KEY = "command";
		COMMAND_LOGIN = "login";
		COMMAND_RECEIVE = "receive";

		var userId = null;

		//loginWindow.show();
		var contextPath = "/auto-comet-demo";
		var sendMessageUrl = contextPath + "/chat.do?method=sendMessage";
		var cometUrl = contextPath + "/chat.comet";

		var sender = {
			url : sendMessageUrl,
			send : function(o) {
				Un.AjaxUtils.request({
					url : this.url,
					param : o.param,
					caller : o.caller,
					success : o.success
				});
			}
		}

		//好友菜单
		var menuWindow = new MenuWindow({
			title : "friends",
			// 			resizable : false,
			borderWidth : 5,
			height : 660,
			width : 280,
			maximizable : false,
			userId : userId,
			sender : sender
		});
		menuWindow.moveTo(20, 20);
		menuWindow.show();

		//menuWindow.removeUser("huhang1986@126.com");

		var comet = new Auto.Comet({
			url : cometUrl,
			accept : function(data) {
				data = eval("(" + data + ")");
				var command = data[COMMAND_KEY];
				if (command == COMMAND_LOGIN) {
					var friend = data.userId;
					menuWindow.addUser(friend);
				} else if (command == COMMAND_RECEIVE) {
					var time = data.time;
					for ( var i in time) {
						alert(i);
					}
					var text = data.text;
					var friend = data.userId;
					
					var content = new Un.Element();
					var nodeFrom = new Un.Element("div");
					nodeFrom.setInnerHtml("<font color=\"blue\">"+friend+ ": " + time+"</font>");
					var nodeContent = new Un.Element("div");
					nodeContent.setInnerHtml("&nbsp;&nbsp;&nbsp;"+ text+"<br>&nbsp;");
					content.appendChild(nodeFrom);
					content.appendChild(nodeContent);
					//打开窗口，然后再接收消息
					menuWindow.openChatWindow(friend);
					menuWindow.receiveMessage(friend, content);
				}
			}
		});

		var loginWindow = new Un.Window({
			title : "Welcome to comet chat",
			closable : false,
			resizable : false,
			width : 430,
			height : 210,
			modal : true,
			//hasShadow : false,
			maximizable : false
		});

		loginWindow.closeAction = loginWindow.hide;
		loginWindow.emailInput = Un.Input.Text.get("userEmail");
		loginWindow.erroeMsgSpan = Un.Element.get("erroeMsg");
		loginWindow.submitBtn = Un.Element.get("loginButton");
		loginWindow.loginLayout = Un.Element.get('loginLayout');
		loginWindow.addContent(loginWindow.loginLayout);
		loginWindow.showErrorMessage = function(msg) {
			if (msg) {
				this.erroeMsgSpan.setAttribute("value", msg);
			}
			this.erroeMsgSpan.show();
		}
		loginWindow.hideErrorMessage = function() {
			this.erroeMsgSpan.hide();
		}
		loginWindow.hideWindow = function() {
			loginWindow.hideShadow();
			loginWindow.fadeOut(500, function() {
				this.close();
			});
		}
		loginWindow.submit = function() {
			var email = this.emailInput.getValue();
			if (!email) {
				this.showErrorMessage("Please enter your email!");
				return;
			} else {
				this.hideErrorMessage();
			}
			userId = email;
			menuWindow.userId = userId;
			this.hideWindow();
			comet.connection({
				userId : email
			});
		}
		loginWindow.submitBtn.addEventListener('click', loginWindow.submit,
				loginWindow);
		loginWindow.erroeMsgSpan.hide();
		loginWindow.show();
	});
</script>
<style type="text/css">
body {
	background-color: #c0c0c0;
	background: url(style/images/chat_bg.gif);
}

.button {
	font-size: 16px;
	padding: 5px 7px 5px 7px !important;
	padding: 3px 2px 0 2px;
	border: solid 1px #E1E1E1;
	cursor: pointer;
}

.login_layout {
	padding: 0 0 0 0;
}

.login_layout p {
	margin: 20px;
}

.login_layout  legend {
	margin: 0 0 0 10px !important /*Non-IE*/;
	margin: 0 0 15px 5px /*IE6*/;
	padding: 0 2px 0 2px;
	color: #666;
	font-size: 14px;
	font-weight: bold;
}

.login_layout  p {
	padding: 0px 50px;
	font-size: 16px;
}

.login_layout  p.message_layout {
	margin-top: 15px;
	height: 10px;
	text-align: center;
}

.login_layout  p .message {
	color: red;
	font-size: 12px;
}

.login_layout  .left {
	float: left;
	text-align: right;
	padding: 4px 10px 0 0 !important;
	padding: 6px 10px 0 0;
	color: #535353;
}

.login_layout  .field {
	font-size: 16px;
	width: 168px;
	padding: 3px;
	border: solid 1px #ccc;
	padding: 3px;
}

.login_layout  .button {
	margin: 0 0 0 180px;
	color: #bd3939;
}

.editor_layout {
	border: solid 1px #333;
	background: #fff;
	height: 100px;
}

.reader_layout {
	border: solid 1px #333;
	background: #fff;
	height: 100px;
	color: #bd3939;
}
</style>

</head>
<body>
	<div class="login_layout" id="loginLayout">
		<form id="loginForm">
			<p class="message_layout">
				<span class="message" id="erroeMsg">Please enter your email!</span>
			</p>
			<p>
				<label for="userEmail" class="left"> email: </label> <input
					type="text" name="userEmail" id="userEmail" class="field"
					maxlength="20" size="20" />
			</p>
			<p>
				<input id="loginButton" class="button" value="login" type="button" />
			</p>
		</form>
	</div>
	<!-- <div class="chat_layout">
		<div class="reader_layout"></div>
		<div class="editor_layout" contentEditable="true"></div>
		<input id="" sendButton" class="button" value="send" type="button" />
	</div> -->
</body>
</html>